<template>
    <a-table
            :columns="columns"
            :row-key="record => record.id"
            :data-source="list"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
    >
        <template #bodyCell="{ column, text ,record}">
            <template v-if="column.dataIndex === 'title'">
                <router-link :to="{ name: 'detail', params: { eventId: record.id }}">《{{record.title}}》</router-link>

            </template>
            <template v-if="column.dataIndex === 'approvalStatus'">
                <a-space>
                    <check-circle-two-tone v-if="text == 'Approved'"  two-tone-color="#52c41a" :style="{fontSize: '26px'}" />
                    <close-circle-two-tone v-if="text == 'Rejected'"   two-tone-color="#eb2f96" :style="{fontSize: '26px'}" />
                    <question-circle-two-tone v-if="text == 'Pending'" :style="{fontSize: '26px'}" />
                    {{ text}}
                </a-space>

            </template>
        </template>
    </a-table>
</template>

<script setup>
import {computed, ref,onMounted,watch} from "vue";
import axios from 'axios'
import { useUserStore } from '../../stores/user';
import {usePagination} from "vue-request";
import {useRoute, useRouter} from 'vue-router'
import checkCircleTwoTone from "@ant-design/icons-vue/lib/icons/CheckCircleTwoTone";
import closeCircleTwoTone from "@ant-design/icons-vue/lib/icons/CloseCircleTwoTone";
import questionCircleTwoTone from "@ant-design/icons-vue/lib/icons/QuestionCircleTwoTone";
const userStore  = useUserStore()
const router = useRouter()
const columns = [{
    title: '标题',
    dataIndex: 'title',

},
    {
        title: '状态',
        dataIndex: 'approvalStatus',
        width: '20%',
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        width: '20%',
    }];

const queryData = params => {
    return axios.get('/event/list', {
        params,
    });
};

const {
    data,
    run,
    loading,
    current,
    pageSize,
} = usePagination(queryData, {
    // formatResult: res => res.data.data.list,
    defaultParams: [
        {
            pageSize: 5,
            userId:userStore.user.id,
            approvalStatus:'all',
        },
    ],
    pagination: {
        currentKey: 'pageNum',
        pageSizeKey: 'pageSize',
    },
});

const list = computed(() => data.value?.data.data.list || []);
const pagination = computed(() => ({
    total: data.value?.data.data.total,
    current: current.value,
    pageSize: pageSize.value,
    pageSizeOptions: ['3', '5', '10']
}));
const handleTableChange = (pag, filters, sorter) => {
    if(sorter.field == 'searchIndex'){
        sorter.field = 'search_index'
    }
    if(sorter.order == 'ascend'){
        sorter.order='asc'
    }else if(sorter.order == 'descend'){
        sorter.order='desc'
    }
    console.log("handleTableChange",filters)
    run({
        pageSize: pag.pageSize,
        pageNum: pag?.current,
        sort: sorter.field,
        order: sorter.order,
        userId:userStore.user.id,
        approvalStatus:'all',
        // ...filters,
    });
};


</script>

<style scoped>

</style>